<template>
  <div>
    <div v-for="item in cities" :key="item.cityId">
      <p style="background-color: aquamarine;">{{ item.letter }}</p>
      <p v-for="(city, index) in item.list" :key="index">{{ city.name }}</p>
    </div>
  </div>
</template>

<script>
import config from "@/assets/json/config.json"
export default {
  name: "",
  data() {
    return {
      cities: [],
      cityData: config.cityData,
    }
  },
  created() {
    this.formatCity()
  },
  methods: {
    formatCity() {
      let letterArr = []
      // 选出26个字母
      for (let i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i))
      }
      let newCityList = []
      // 从数组中取出数据进行对比
      for (let j = 0; j < letterArr.length; j++) {
        // 过滤字母相同的数组
        const tempArr = this.cityData.filter((item) => item.pinyin.slice(0, 1) === letterArr[j].toLowerCase())
        if (tempArr.length > 0) {
          newCityList.push({
            letter: letterArr[j],
            list: tempArr,
          })
        }
      }
      this.cities = newCityList
    },
  },
}
</script>
<style lang="less" scoped></style>
